<template>
  <div class="cls1" ref="chartSC"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, useTemplateRef, ref } from 'vue';
import request from '../axios/request'

const chartSC = ref()
//不同年份的需求量
function chartsInit(data) {
  var x = [];
  var y= [];

  for (var i = 0; i < data.length; i++) {
    x.push(data[i].python);
    y.push(data[i].num);
  }
  var myChart = echarts.init(chartSC.value, 'Light');
  var option;

  option = {
    title: {
      text: '对sql的掌握程度统计图',
      textStyle: {
        color: '#FF6060',
        fontSize: 20,
        textAlign: 'center',
      },
      left: 'center',
      //bottom: '5%'
      top:20,
    },
    legend: {
      data: ['人数']
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: x
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: y,
        type: 'line',
        areaStyle: {},
        name: '人数',
        tooltip: { // 添加 tooltip 配置
          show: true,
          trigger: 'axis',
          formatter: function (params) {
            return `${params.python}: ${params.num}`;
          }
        }
      }
    ]
  };

  option && myChart.setOption(option);
}

//组件挂载成功
onMounted(function () {
  //发起axios异步请求，获取数据
  request({
    url: '/stu-api/queryAllpy',  // 配置的代理请求会拦截
    method: 'get'
  }).then(res => {

    chartsInit(res.data.data)
  }).catch((error) =>
      console.log(error))
})

</script>
<style scoped>
.cls1{
  width: 550px;
  height: 400px;
  transform: translateY(-30px);
}
</style>